<template>
    <view class="byt-shop">
        <view class="byt-shop__tabpane-item" v-for="(sitem, sindex) in items" :key="sindex" @click="shopClick(sitem)">
            <view class="byt-shop__tabpane-item__left">
                <view class="byt-shop__tabpane-item__left__image">
                    <image :src="sitem.image" mode="widthFix" style="width: 100%;"></image>
                </view>
            </view>
            <view class="byt-shop__tabpane-item__right">
                <view class="byt-shop__tabpane-item__right__content">
                    <view class="byt-shop__tabpane-item__right__name">{{ sitem.name }}</view>
                    <view class="byt-shop__tabpane-item__right__desc">{{ sitem.desc }}</view>
                </view>
                <view class="byt-shop__tabpane-item__right__btn">进店</view>
            </view>
        </view>
    </view>
</template>

<script>
import { isEmpty } from '../../../utils/index.js';
export default {
    name: 'shop',
    emits: ['click'],
    props: {
        // 优惠券列表
        items: {
            type: Array,
            default: () => [
                {
                    id: 1,
                    image: 'https://marketplace.canva.cn/EAF5TAr7Zfc/1/0/1600w/canva-LoBvGA2wjHA.jpg',
                    name: '店铺名称1',
                    desc: '店铺描述店铺描述店铺描述店铺描述'
                },
                {
                    id: 2,
                    image: 'https://t8.baidu.com/it/u=2676458980,1132146964&fm=193',
                    name: '店铺名称2',
                    desc: '店铺描述店铺描述店铺描述店铺描述'
                },
                {
                    id: 3,
                    image: 'https://img.yzcdn.cn/upload_files/2023/08/18/Fg7F4L2XLvTEY7ulnZ5TX5Snr_zw.png',
                    name: '店铺名称3',
                    desc: '店铺描述店铺描述店铺描述店铺描述'
                },
            ]
        },
        // 数据键值
        labelObj: {
            type: Array,
            default: () => ['price', 'fullPrice', 'name', 'deadlineStart', 'deadlineEnd']
        }
    },
    data() {
        return {};
    },
    methods: {
        isEmpty,
        shopClick(row) {
            this.$emit('click', row);
        }
    }
};
</script>

<style lang="scss" scoped>
@include b(shop) {
    @include e(title) {
        display: flex;
        align-items: center;
        padding: 20rpx 32rpx;

        @include eb(icon) {
            margin: 0 4px;
            font-size: 32rpx;
            color: #303133;
        }
    }

    @include e(tabpane-item) {
        display: flex;
        align-items: center;
        background: #FAFAFA;
        margin-bottom: 16rpx;
        border-radius: 16rpx;

        @include e(left) {
            padding: 0 16rpx 0 24rpx;
            // width: 158rpx;
            // border-right: 1px solid #ffd7d36b;
            // flex-shrink: 0;


            @include e(image) {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                overflow: hidden;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            @include e(desc) {
                text-align: center;
                margin-top: 8rpx;
                font-size: 20rpx;
                color: #988283;
            }
        }

        @include e(right) {
            padding: 24rpx 24rpx 24rpx 0;
            box-sizing: border-box;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;

            @include e(content) {
                width: 100%;
            }

            @include e(name) {
                width: 240rpx;
                color: #010103;
                font-size: 24rpx;
                font-weight: bold;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            @include e(desc) {
                min-width: 250rpx;
                max-width: 300rpx;
                margin-top: 10rpx;
                font-size: 24rpx;
                color: #666666;
                letter-spacing: -0.3px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            @include e(btn) {
                min-width: 104rpx;
                height: 48rpx;
                background: #494848;
                border-radius: 24rpx;
                font-size: 24rpx;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        &:last-child {
            margin-bottom: 20rpx;
        }
    }
}
</style>
